<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Readme Activity Graph</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet" />
    <script src="https://kit.fontawesome.com/457a315592.js" crossorigin="anonymous"></script>
    <link href="./styles.css" rel="stylesheet" />
    <link rel="icon" href="asset/logo.png" />
  </head>

  <body class="bg-color">
    <!-- Dark Theme Mode -->
    <button class="toggle-btn">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        class="svg-sun"
      >
        <path
          d="M 11 0 L 11 3 L 13 3 L 13 0 L 11 0 z M 4.2226562 2.8085938 L 2.8085938 4.2226562 L 4.9296875 6.34375 L 6.34375 4.9296875 L 4.2226562 2.8085938 z M 19.777344 2.8085938 L 17.65625 4.9296875 L 19.070312 6.34375 L 21.191406 4.2226562 L 19.777344 2.8085938 z M 12 5 C 8.1458514 5 5 8.1458514 5 12 C 5 15.854149 8.1458514 19 12 19 C 15.854149 19 19 15.854149 19 12 C 19 8.1458514 15.854149 5 12 5 z M 12 7 C 14.773268 7 17 9.2267316 17 12 C 17 14.773268 14.773268 17 12 17 C 9.2267316 17 7 14.773268 7 12 C 7 9.2267316 9.2267316 7 12 7 z M 0 11 L 0 13 L 3 13 L 3 11 L 0 11 z M 21 11 L 21 13 L 24 13 L 24 11 L 21 11 z M 4.9296875 17.65625 L 2.8085938 19.777344 L 4.2226562 21.191406 L 6.34375 19.070312 L 4.9296875 17.65625 z M 19.070312 17.65625 L 17.65625 19.070312 L 19.777344 21.191406 L 21.191406 19.777344 L 19.070312 17.65625 z M 11 21 L 11 24 L 13 24 L 13 21 L 11 21 z"
        ></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        width="30"
        height="30"
        viewBox="0 0 172 172"
        class="svg-moon"
      >
        <path
          d="M126.13333,120.4c-37.9948,0 -68.8,-30.8052 -68.8,-68.8c0,-11.18 2.72333,-21.70067 7.45333,-31.0288c-27.606,8.944 -47.58667,34.84147 -47.58667,65.4288c0,37.9948 30.8052,68.8 68.8,68.8c26.82053,0 49.99467,-15.3768 61.34667,-37.7712c-6.68507,2.1672 -13.80587,3.3712 -21.21333,3.3712z"
        ></path>
      </svg>
    </button>

    <main class="container">
      <!-- Loader -->
      <div class="loader">
        <span></span>
      </div>
      <!-- Header - Logo & Text -->
      <header class="header">
        <div class="title_container">
          <img src="./asset/logo.svg" alt="logo" />
          <h1 class="heading">GitHub Readme Activity Graph</h1>
        </div>
        <p class="description">
          A dynamically generated activity graph to show your GitHub activities of last 31 days.
        </p>
      </header>
      <!-- Form - Input & Submit button for  Username -->
      <div class="container__item">
        <form class="form">
          <input
            type="username"
            class="form__field"
            placeholder="Enter Your GitHub Username"
            id="username"
          />
          <button type="submit" class="btn btn--primary" id="submit-button">Build Graph</button>
        </form>
      </div>
      <!-- Split Container Contains - Color Pickers , Chart, & Copy Button -->
      <div class="split_container">
        <section class="left">
          <div>
            <input type="color" class="picker" name="bgColor" value="#ffcfe9" id="bgColor" />
            <label for="bgColor">Background Color</label>
          </div>
          <div>
            <input type="color" class="picker" name="line" value="#9e4c98" id="line" />
            <label for="line">Line Color</label>
          </div>
          <div>
            <input type="color" class="picker" name="point" value="#403d3d" id="point" />
            <label for="point">Point Color</label>
          </div>
          <div>
            <input type="color" class="picker" name="color" value="#9e4c98" id="color" />
            <label for="color">Text Color</label>
          </div>
        </section>
        <section class="right">
          <div class="rect">
            <div class="chart_placeholder active">
              <p class="placeholder_text">Your graph will be visible here.</p>
            </div>
            <div class="ct-chart"></div>
          </div>

          <div class="copy_container">
            <div class="copy_text">
              <input
                type="text"
                class="text"
                placeholder="Build your graph to generate the link."
                value=""
                disabled
              />
              <button>
                <img
                  height="20px"
                  width="20px"
                  src="https://clipboardjs.com/assets/images/clippy.svg"
                  alt="copy-text"
                />
              </button>
            </div>
          </div>
        </section>
      </div>
      <!-- Footer - Text & Link -->
      <footer class="footer">
        <p><b>More Info : </b></p>
        <a class="link github" href="https://github.com/Ashutosh00710/github-readme-activity-graph">
          <i class="fab fa-2x fa-github"></i>
        </a>
      </footer>
    </main>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartist-plugin-axistitle@0.0.7/dist/chartist-plugin-axistitle.min.js"></script>
  <script src="./script.js"></script>
</html>
